<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { removeToken } from "../utils/setToken";
const router = useRouter();
const menu1Value = ref("item1");
const cachedPages = ref([]);
const changeHandler = (active) => {
  console.log("change", active);
};
const editableTabsValue = ref("2");
window.addEventListener("resize", () => {
  dhl();
});
const dhl = () => {
  let cc = document.querySelector(".cc");
  cc.style = "width:" + (document.body.clientWidth - 500) + "px";
};
const editableTabs = ref([
  // {
  //   title: "首页",
  //   name: "/basic/staff",
  // },
  // {
  //   title: "湿哒哒 2",
  //   name: "/basic/staff1",
  // },
]);
//删除标签
const removeTab = (targetName) => {
  const tabs = editableTabs.value;
  let activeName = editableTabsValue.value;
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1];
        if (nextTab) {
          activeName = nextTab.name;
        }
      }
    });
  }

  editableTabsValue.value = activeName;
  editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
};
//点击标签
const cliktab=(pane)=>{
    router.push(pane.props.name);
}
const arr = [];
router.options.routes[2].children.forEach((item) => {
  if (
    item.name === "platform" ||
    item.name === "platformO" ||
    item.name === "platformT" ||
    item.name === "platformS" ||
    item.name === "platformF" ||
    item.name === "platformV" ||
    item.name === "platformX" ||
    item.name === "platformW" ||
    item.name === "platformA"
  ) {
    console.log();
  } else {
    arr.push(item.name);
  }
});
cachedPages.value = arr;
//跳转
const navroter = (url, name) => {
  let fal = editableTabs.value.every(function (item) {
    return item.name !== url;
  });
  if (fal) {
    editableTabs.value.push({
      title: name,
      name: url,
    });
    editableTabsValue.value = url;
  } else {
    editableTabsValue.value = url;
  }
  router.push(url);
};
const tc = () => {
  router.push("/login");
  removeToken("token");
};
onMounted(() => {
  dhl();
});
</script>
<template>
  <t-layout>
    <t-header
      style="
        position: fixed;
        width: 100%;
        z-index: 999;
        height: 51px;
        padding: 5px;
      "
    >
      <t-head-menu v-model="menu1Value" theme="light" @change="changeHandler">
        <template #logo>
          <div
            style="
              font-size: 18px;
              width: 200px;
              display: flex;
              justify-content: center;
              gap: 8px;
              align-items: center;
            "
          >
            <img
              width="40"
              height="40"
              class="logo"
              src="../static/images/icon/logo.png"
              alt="logo"
            /><span>盛心理智能平台</span>
          </div>
        </template>
        <!-- <t-menu-item value="item1"> 首页概览 </t-menu-item>
        <t-menu-item value="item2"> 员工管理 </t-menu-item>
        <t-menu-item value="item3"> 测评服务 </t-menu-item>
        <t-menu-item value="item4"> 重度治疗 </t-menu-item>
        <t-menu-item value="item5"> 项目管理 </t-menu-item>
        <t-menu-item value="item6"> 项目管理 </t-menu-item> -->
        <div class="cc" style="overflow: hidden">
          <el-tabs
            v-model="editableTabsValue"
            type="card"
            class="demo-tabs"
            closable
            @tab-remove="removeTab"
            @tab-click="cliktab"
          >
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
            </el-tab-pane>
          </el-tabs>
        </div>
        <template #operations>
          <t-button variant="text" shape="square">
            <template #icon
              ><t-icon
                name="search"
                size="25"
                style="color: rgb(123, 140, 149)"
            /></template>
          </t-button>
          <t-button variant="text" shape="square">
            <template #icon
              ><t-icon
                name="notification-filled"
                size="24"
                style="color: rgb(123, 140, 149)"
            /></template>
          </t-button>
          <div>李木木</div>
          <img class="photo" src="../static/images/touxiang.png" alt="" />
          <!-- <t-button variant="text" shape="square">
            <template #icon><t-icon name="ellipsis" size="25" /></template>
          </t-button> -->
          <span style="color: rgb(59, 182, 254); cursor: pointer" @click="tc()"
            >退出登录</span
          >
        </template>
      </t-head-menu>
    </t-header>
    <div style="height: 56px"></div>
    <t-layout>
      <t-aside
        style="
          border-top: 1px solid var(--component-border);
          min-height: calc(100vh - 56px);
          min-width: 200px;
        "
      >
        <t-menu theme="light" defaultValue>
          <t-submenu value="1" title="数据看板">
            <template #icon>
              <img
                class="icon-img2"
                src="../static/images/icon/kanban.png"
                alt=""
              />
            </template>

            <t-menu-item
              value="1-1"
              @click="navroter('/board/Current', '当前项目')"
            >
              <img
                class="icon-img"
                src="../static/images/icon/dian.png"
                alt=""
              />
              当前项目
            </t-menu-item>

            <t-menu-item
              value="1-2"
              @click="navroter('/board/all', '数据总览')"
            >
              <img
                class="icon-img"
                src="../static/images/icon/dian.png"
                alt=""
              />
              数据总览
            </t-menu-item>
            <!-- <t-menu-item value="1-3">
              <router-link to="/board/pour">
                <a href="">即刻倾诉</a>
              </router-link>
            </t-menu-item> -->
          </t-submenu>

          <t-submenu value="2" title="基础信息">
            <template #icon>
              <img
                class="icon-img2"
                src="../static/images/icon/jichu.png"
                alt=""
              />
            </template>
            <t-menu-item
              value="2-1"
              @click="navroter('/basic/staff', '员工档案')"
            >
              <img
                class="icon-img"
                src="../static/images/icon/dian.png"
                alt=""
              />
              员工档案
            </t-menu-item>
            <t-menu-item
              value="2-2"
              @click="navroter('/basic/framework', '组织架构')"
            >
              <img
                class="icon-img"
                src="../static/images/icon/dian.png"
                alt=""
              />
              组织架构
            </t-menu-item>
            <!-- <t-menu-item value="2-3">
              <router-link to="/basic/supplier">
                <img
                  class="icon-img"
                  src="../static/images/icon/dian.png"
                  alt=""
                />
                <a href=""> 专家供应商</a>
              </router-link>
            </t-menu-item>
            <t-menu-item value="2-4">
              <router-link to="/basic/role">
                <img
                  class="icon-img"
                  src="../static/images/icon/dian.png"
                  alt=""
                />
                <a href=""> 角色管理</a>
              </router-link>
            </t-menu-item> -->
          </t-submenu>

          <t-submenu value="3" title="评测服务">
            <template #icon>
              <img
                class="icon-img2"
                src="../static/images/icon/pingce.png"
                alt=""
              />
            </template>
            <t-menu-item
              value="3-1"
              @click="navroter('/evaluating/square', '评测广场')"
            >
              <img
                class="icon-img"
                src="../static/images/icon/dian.png"
                alt=""
              />
              评测广场
            </t-menu-item>
            <t-menu-item
              value="3-2"
              @click="navroter('/board/allproject', '评测项目')"
            >
              <img
                class="icon-img"
                src="../static/images/icon/dian.png"
                alt=""
              />
              评测项目
            </t-menu-item>
          </t-submenu>

          <t-submenu value="5" title="咨询服务">
            <template #icon>
              <img
                class="icon-img2"
                src="../static/images/icon/zixun.png"
                alt=""
              />
            </template>
            <t-menu-item
              value="5-1"
              @click="navroter('/board/crisis', '咨询数据')"
            >
              <img
                class="icon-img"
                src="../static/images/icon/dian.png"
                alt=""
              />
              咨询数据
            </t-menu-item>
            <t-menu-item
              value="5-2"
              @click="navroter('/board/crisisIL', '危机数据')"
            >
              <img
                class="icon-img"
                src="../static/images/icon/dian.png"
                alt=""
              />
              危机数据
            </t-menu-item>
            <t-menu-item
              value="5-3"
              @click="navroter('/board/analyse', '组织分析')"
            >
              <img
                class="icon-img"
                src="../static/images/icon/dian.png"
                alt=""
              />
              组织分析
            </t-menu-item>
          </t-submenu>
          <t-menu-item value="precise-monitor">
            <template #icon>
              <img
                class="icon-img2"
                src="../static/images/icon/kecheng.png"
                alt=""
              />
            </template>
            课程服务
          </t-menu-item>
          <t-menu-item value="precise-monitor">
            <template #icon>
              <img
                class="icon-img2"
                src="../static/images/icon/pingce.png"
                alt=""
              />
            </template>
            评测预警
          </t-menu-item>
          <t-submenu value="4" title="数据中心">
            <template #icon>
              <img
                class="icon-img2"
                src="../static/images/icon/shuju.png"
                alt=""
              />
            </template>
            <t-menu-item
              value="4-1"
              @click="navroter('/centre/platform', '平台数据')"
            >
              <img
                class="icon-img"
                src="../static/images/icon/dian.png"
                alt=""
              />
              平台数据
            </t-menu-item>
          </t-submenu>
          <t-menu-item value="precise-monitor">
            <template #icon>
              <img
                class="icon-img2"
                src="../static/images/icon/xitong.png"
                alt=""
              />
            </template>
            系统管理
          </t-menu-item>
        </t-menu>
      </t-aside>
      <t-layout class="adac">
        <t-content style="height: 300px">
          <!-- <keep-alive :include="cachedPages">
            <router-view></router-view>
          </keep-alive> -->
          <router-view v-slot="{ Component }">
            <keep-alive :include="cachedPages">
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </t-content>
      </t-layout>
    </t-layout>
  </t-layout>
</template>

<style lang="scss" scoped>
.icon-img {
  width: 5px;
  padding: 2px 5px;
}
.icon-img2 {
  width: 25px;
  padding: 2px 5px;
}
:deep(.t-default-menu) {
  width: 230px !important;
}
.adac {
  overflow-x: hidden !important;
}
.photo {
  margin: 0 10px;
  width: 40px;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 25px;
  cursor: pointer;
}
.photo:hover {
  opacity: 0.8;
}
.t-default-menu .t-menu__item.t-is-active:not(.t-is-opened) {
  background: #e3f0f4;
  color: #000;
}
.t-menu__item.t-is-active {
  background: #e3f0f4 !important;
  color: #000 !important;
}
</style>
